<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>下级订单</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js?v=0.01"></script>

<link type="text/css" rel="stylesheet" href="/static/css/order_index.css">
<style>
.tab-na{ display:none; width:100%; height:4px; left:0;bottom:0; position:absolute; background:#5c8dff; }
.am-tabs-tab-active .tab-na{ display:block;}
</style>
</head>
<body>

<div id="pages">
    <div>
        <div>
            <div class="g-am-init g-reset">
                <div class="am-tabs am-tabs-top" style="overflow:hidden;">
                    <div role="tablist" class="am-tabs-bar" tabindex="0">
						<div class="am-tabs-ink-bar am-tabs-ink-bar-animated" style="display: none;  width: 146px;"></div>
						<!--状态导航-->
						{volist name='$rechargestaus' id='v'}
                        <div role="tab" data-status="{$v.value}" class="am-tabs-tab {if condition="$v.value eq $search.status"}am-tabs-tab-active{/if}">
                            <div class="g-tabs g-relative">
                                <div>{$v.name}</div>
								{if condition="$v.num gt 0"}
								<div class="g-absolute" style="display: block; height: 30px; width: 30px; top: 42px; right: 10px; background: rgb(246, 111, 98); border-radius: 15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: 30px; font-family: &quot;&quot;; color: white; z-index: 20;">{$v.num}</div>
								{/if}
							</div>
							<div class='tab-na'></div>
                        </div>
						{/volist}
						<!--状态导航 End-->
						
                    </div>
					
                    <div class="am-tabs-content am-tabs-content-animated" id="container" style="transform: translateX(0%) translateZ(0px);">
					
            <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-active">

				
				<div class="common-pull-scroll pull-view-wrap scroll-container-0" style="padding-bottom: 0px;overflow-x:hidden;">
					
					{notempty name='list'}
					<div class='scroll-item' style="transform: translateY(0px);">
						<div>
							<div id='order-items'>
								{volist name='list' id='v'}
								<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="{$v.rechargeid}" href="{:url('Agent/suborder_detail')}?rechargeid={$v.rechargeid}">
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>充值单号：{$v.rechargeid}</div>
											<div class="g-blue-middle" style="color: rgb(92, 141, 255);">{$v.status|__agent_suborder_status}</div>
										</div>
									</div>
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>充值代理：{$v.agentname}</div>
										</div>
									</div>
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>充值类别：{$v.rechargetype}</div>
										</div>
									</div>
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>充值时间：{$v.rechargetime}</div>
										</div>
									</div>
									<div class="common-order-popover">
										<div class="g-row g-pd-tb g-pd-lr">
											<div class="g-flex g-jc-sb g-ai-c">
												<div class="__target" style="width: 10vw; position: relative;"></div>
												<div class="g-row" style="width: 86vw;">
													{$v.status|__suborder_status_btn}
												</div>
											</div>
										</div>
									</div>
								</a>
								{/volist}
						</div>
						</div>
						</div>
					
					{else /}
					<div style="transform: translateY(0px);">
						<div class="g-tc" style="margin-top: 25%;">
							<img src="//oss.nawen1413.com/images/empty_state.png" alt="" class="g-m-b">
						</div>
					</div>
					<div class="_dropload _scroll" style="transform: translateY(0px);">
						<div class="_status">
							<span class="g-fs-26">没有内容可供显示</span>
						</div>
					</div>
					{/notempty}
				</div>
            </div>

                    </div>
                </div>
            </div>
			
            <div class="c-share-back" data-func="goback">
                <div class="__content">
                    <i class="iconfont icon-goback __icon"></i>
                </div>
            </div>
			
        </div>
    </div>
</div>

<style>
.dropload-down{ height:100px;  }
.dropload-up, .dropload-down{ font-size:26px; }
.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{ height:100px; line-height:100px; }
.dropload-load .loading { height: 30px; width: 30px; border-radius: 100%; margin: 12px; border: 4px solid #666; }
</style>

<script>

goback = function(){ location.href = "/"; }

var search = {
	status : "{$search.status}",
	page : 1,
};

//根据主体显示内容设置窗口尺寸
function resizeMain(){
	let _mh = jQuery(window).height() - jQuery('.g-search-box').outerHeight() - jQuery('.am-tabs-bar').outerHeight();
	console.log(_mh);
	jQuery('.scroll-container-0').is(':visible').css('min-height',_mh).css('height',_mh);
}

$(function(){
	
	//状态切换
	$("[role='tablist']").find("[role='tab']").each(function(navIndex){
		$(this).click(function(){
			search.page = 1;
			search.status = parseInt($(this).attr('data-status'));
			location.href = "{:url('Agent/suborders')}?status=" + search.status+"&page=1";
		});
	});
	//计算主体高度
	let _mh = $(window).height();
	if($('.g-search-box').length > 0){
		_mh -= $('.g-search-box').outerHeight();
	}
	if($('.am-tabs-bar').length > 0){
		_mh -= $('.am-tabs-bar').outerHeight();
	}
	
	$('.scroll-container-0').css('min-height',_mh).css('height',_mh);
	
	bindOrderStatusBtnAction();
	
	$('.scroll-container-0').scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(this).height();
        var windowHeight = $('.scroll-item',this).height();
		if (canloadpage && scrollTop + scrollHeight >= windowHeight && lastscrollTop < scrollTop) {
			canloadpage = false;
			loadPage();
	　　}
		lastscrollTop = scrollTop;
	});
});

function bindOrderStatusBtnAction(){
	//具体订单状态按钮
	$('.order-status-btn').unbind('click');
	$('.order-status-btn').bind('click',function(){
		let action = $(this).attr('data-action');
		order_status_btn_do($(this).parents('a').attr('data-id'),action);
		return false;
	});
}

var canloadpage = true;
var lastscrollTop = 0;
function loadPage(){
	search.page++;
	let iii = layer.open({type:2,shade:false});
	$.ajax({
		url : "{:url('Agent/suborders_loadpage')}",
		type : "POST",
		dataType : "JSON",
		data : search,
		success : function(e){
			if(e.flag && e.data.list.length > 0){
				search.page = parseInt(e.data.search.page);
			}
			parseOrderItemHtml(e.data.list);
		},error : function(){
		},complete : function(){
			layer.close(iii);
			canloadpage = true;
		}
	});
}

function order_status_btn_do(rechargeid,action){
	if(action == 'pinzheng'){
		//查看凭证
		location.href = "{:url('Agent/suborder_detail')}?rechargeid="+rechargeid;
	}
}
</script>


<script src="__JS__/jsrender.min.js"></script>

<script type="text/x-jsrender" id="ordertpl">
<%for%>
<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="<%:rechargeid%>" href="{:url('Agent/suborder_detail')}?rechargeid=<%:rechargeid%>">
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>充值单号：<%:rechargeid%></div>
			<div class="g-blue-middle" style="color: rgb(92, 141, 255);"><%:status%></div>
		</div>
	</div>
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>充值代理：<%:agentname%></div>
		</div>
	</div>
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>充值类别：<%:rechargetype%></div>
		</div>
	</div>
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>充值时间：<%:rechargetime%></div>
		</div>
	</div>
	<div class="common-order-popover">
		<div class="g-row g-pd-tb g-pd-lr">
			<div class="g-flex g-jc-sb g-ai-c">
				<div class="__target" style="width: 10vw; position: relative;"></div>
				<div class="g-row" style="width: 86vw;">
					<%:btns%>
				</div>
			</div>
		</div>
	</div>
</a>
<%/for%>
</script>

<script>
$.views.settings.delimiters("<%", "%>");
function parseOrderItemHtml(orderData){
	$('._dropload').remove();
	if(orderData.length < 1 && $('._dropload').length < 1){
		let _t = '<div class="_dropload _scroll" style="transform: translateY(0px);"><div class="_status"><span class="g-fs-26" style="line-height:3em;">我是有底线的</span></div></div>';
		if($('#order-items').length < 1){
			return;
		}
		$('#order-items').append(_t);
		return;
	}
	
	var template = $.templates("#ordertpl");
	var html = template.render(orderData);
	
	let head,foot = '';
	if($('#order-items').length < 1){
		//当前没显示订单数据
		head = "<div class='scroll-item' style='transform: translateY(0px);'><div><div id='order-items'>";
		foot = "</div></div></div>";
		$('.scroll-container-0').html(head+html+foot);
	}else{
		$('#order-items').append(html);
	}
	bindOrderStatusBtnAction();
}
</script>



</body>
</html>